<!DOCTYPE html>
<html>
<head>
    <title>SelectPage入门指南</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../lib/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../lib/font-awesome-4/css/font-awesome.min.css" />
    
    <link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCore.css" type="text/css">
	<link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shThemeDefault.css" type="text/css">
    
    <link rel="stylesheet" href="../css/header.css" />
    <link rel="stylesheet" href="../css/guide.css" />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-4688926342467996",
    enable_page_level_ads: true
  });
</script>
</head>

<body>
    <header class="navbar navbar-static-top" id="top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="https://terryz.oschina.io/selectpage/index.html" class="navbar-brand">SelectPage</a>
        </div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="javascript:void(0);" >入门</a>
                </li>
                <li>
                    <a href="demo.html" >实例</a>
                </li>
                <li>
                    <a href="docs.html" >文档</a>
                </li>
                <li>
                    <a href="changelog.html" >更新记录</a>
                </li>
                <li>
                    <a href="message.html" >留言/反馈</a>
                </li>
                <li>
                    <a href="https://terryz.oschina.io" >Home</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://github.com/TerryZ/SelectPage" target="_blank"><i class="fa fa-lg fa-github"></i> Fork on Github</a></li>
            </ul>
        </nav>
    </div>
    </header>

	<div class="content">
	<div class="container">
		<h1 class="text-center">入门指南</h1>

		<h3>资源导入 <small>在网页上引用css样式、js脚本等文件</small></h3>
<script type="syntaxhighlighter" class="brush:html">
<![CDATA[
<!-- 基础环境引用说明 -->
<!-- Bootstrap的UI框架基础样式 -->
<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
<!-- 插件使用了部分font-awesome的图标，所以需要引入该样式 -->
<link rel="stylesheet" href="font-awesome.min.css" type="text/css">
<!-- jQuery，Bootstrap的基础脚本引用 -->
<script type="text/javascript" src="bootstrap.min.js" >< /script>
<script type="text/javascript" src="jquery.min.js" >< /script>


<!-- 插件使用的样式表文件，根据使用环境的Bootstrap版本进行引用 -->
<!-- Bootstrap2使用 -->
<link rel="stylesheet" href="selectpage.css" type="text/css">
<!-- Bootstrap3使用 -->
<link rel="stylesheet" href="selectpage.bootstrap3.css" type="text/css">
<!-- 非Bootstrap生态下引用该样式 -->
<link rel="stylesheet" href="selectpage.base.css" type="text/css">
<!-- 以上的样式文件根据实际使用的环境进行引用，引用其中一项即可 -->

<!-- 插件核心脚本 -->
<script type="text/javascript" src="selectpage.js" >< /script>
]]>
</script>


		<h3>HTML代码</h3>
<script type="syntaxhighlighter" class="brush:html">
<![CDATA[
<!-- 设置文本框为插件基本元素 -->
<input type="text" id="selectPage" >
]]>
</script>

		<h3>Javascript初始化插件代码</h3>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//定义数组，在服务端返回的数据也以该格式返回：Array[{Object},{...}]
var tag_data = [
	{id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
	{id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
	{id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},
	{id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}
];
//初始化插件
$('#selectPage').selectPage({
	showField : 'desc',
	keyField : 'id',
	data : tag_data
});
]]>
</script>







<!--
<div id="container"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
  id: 'SelectPage.Guide', // 可选。默认为 location.href
  owner: 'TerryZ',
  repo: 'SelectPage',
  oauth: {
    client_id: 'c896a41443d7e83f9fa3',
    client_secret: '3493482e79023549b3ececd4dd0ce58b925df8d4',
  },
})
gitment.render('container')
</script>

<div id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://https-terryz-github-io.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
-->


	</div>
	</div>

	
	




	<footer class="footer">
		<div class="container">
		<p>使用交流QQ群：136153290</p>
		Copyright © 2016-2017 Terry Zeng
		</div>
	</footer>







<script type="text/javascript" src="../lib/jquery.min.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushCss.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js" ></script>
<script type="text/javascript">
$(function(){
	SyntaxHighlighter.all();
});
</script>
<script type="text/javascript" src="../js/count.js" ></script>
</body>
</html>